<template>
  <div class="mui-pages" style="background-color: #fff">
    <header class="mui-bar mui-bar-nav flex-between-center">
      <a @click="fn.back()" href="javascript:void(0)"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></a>
      <div class="header-search keyworld-search">
        <i class="search-icon" @click="search"></i>
        <input
          type="search"
          v-model="keyword"
          placeholder="请输入关键词搜索"
          value=""
        />
      </div>
    </header>
    <div>
      <div class="organization-tab mui-segmented-control flex-between-center">
        <a
          @click="loadData('partyaffairsoffice')"
          :class="{ 'mui-active': tabIndex == 0 }"
          class="mui-control-item"
          href="javascript:void(0)"
          >组织发布</a
        >
        <a
          @click="loadData('branch')"
          :class="{ 'mui-active': tabIndex == 1 }"
          class="mui-control-item"
          href="javascript:void(0)"
          >我的支部</a
        >
      </div>
      <div class="mui-scroll-wrapper" style="padding-top: 45px">
        <div class="mui-scroll mui-scroll-wrapper">
          <!-- --------组织---------------start -->
          <div
            v-if="tabIndex == 0"
            id="organization"
            class="mui-active mui-scroll-wrapper"
            style="padding-top: 45px"
          >
            <div
              class="organization-lists mui-scroll-wrapper"
              style="padding-top: 45px"
            >
              <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="onPullingUp"
              >
                <cube-swipe>
                  <transition-group name="swipe" tag="div">
                    <div
                      class="mui-table-view-cell"
                      v-for="(data, index) in partyaffairsofficeData"
                      :key="data.id"
                    >
                      <cube-swipe-item
                        ref="swipeItem"
                        :btns="data.btns"
                        :index="index"
                        :class="{ 'swiper-no-swiping': !canEditOrDelete(data) }"
                        @btn-click="edit"
                      >
                        <div @click="detail(data)">
                          <div class="mui-slider-handle">
                            <h2
                              class="organization-lists-title"
                              v-html="data.title"
                            ></h2>
                            <div class="organization-lists-time">
                              <span
                                >{{ data.createTime }}
                                {{ data.publisherName }}&nbsp;{{
                                  data.sourceOfPublication
                                }}&nbsp;阅读：{{ data.readingVolume }}</span
                              >
                            </div>
                          </div>
                        </div>
                      </cube-swipe-item>
                    </div>
                  </transition-group>
                </cube-swipe>
              </cube-scroll>
            </div>
          </div>
          <!-- --------组织---------------end -->
          <!-- --------支部---------------start -->
          <div
            v-if="tabIndex == 1"
            id="branch"
            class="mui-active mui-scroll-wrapper"
            style="padding-top: 45px"
          >
            <div
              class="organization-lists mui-scroll-wrapper"
              style="padding-top: 45px"
            >
              <cube-scroll
                ref="scroll"
                :options="options"
                @pulling-up="onPullingUp"
              >
                <cube-swipe>
                  <transition-group name="swipe" tag="div">
                    <div
                      class="mui-table-view-cell"
                      v-for="(data, index) in branchData"
                      :key="data.id"
                    >
                      <cube-swipe-item
                        ref="swipeItem"
                        :btns="data.btns"
                        :index="index"
                        :class="{ 'swiper-no-swiping': !canEditOrDelete(data) }"
                        @btn-click="edit"
                      >
                        <div @click="detail(data)">
                          <div class="mui-slider-handle">
                            <h2
                              class="organization-lists-title"
                              v-html="data.title"
                            ></h2>
                            <div class="organization-lists-time">
                              <span
                                >{{ data.createTime }}
                                {{ data.publisherName }}&nbsp;{{
                                  data.sourceOfPublication
                                }}&nbsp;阅读：{{ data.readingVolume }}</span
                              >
                            </div>
                          </div>
                        </div>
                      </cube-swipe-item>
                    </div>
                  </transition-group>
                </cube-swipe>
              </cube-scroll>
            </div>
          </div>
          <!-- --------支部---------------end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      tabIndex: 0,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      branchData: [],
      partyaffairsofficeData: [],
      otherData: [],
      infinite: true,
      pageIndex: 0,
      pageSize: 10,
      currentSourceOfPublicationId: "",
      keyword: "",
      tempKeyword: "",
      partyGroupId: "",
    };
  },
  created() {
    this.tempKeyword = this.keyword;
    this.partyGroupId = this.$route.params.partyGroupId;
    this.loadData("partyaffairsoffice");
  },
  watch: {
    keyword(newValue, oldValue) {
      this.search();
    },
  },
  methods: {
    edit(btn, index) {
      let data;
      if (this.tabIndex === 0) {
        data = this.partyaffairsofficeData[index];
      } else if (this.tabIndex === 1) {
        data = this.branchData[index];
      } else {
        data = this.otherData[index];
      }
      if (btn.action === "edit") {
        this.$store.state.editAffairsData = null;
        this.$store.state.editAffairsData = data;
        this.$router.push({ name: "affairsAdd" });
      } else if (btn.action === "delete") {
        this.deleteItem(data.id);
      }
    },
    detail(data) {
      let userInfo = this.$store.state.userInfo || {};
      let param = {
        affarisId: data.id,
        partyMemberId: userInfo.partyMemberModel.id,
      };
      loginService.getPartyAffairsInfo(param).then((res) => {
        if (res.code !== 200) {
          return tools.tip(res.message);
        }
        this.$store.state.affairsData = res.data;
        this.$router.push({ path: `/newsDetails/${data.id}/1` });
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData(this.currentSourceOfPublicationId);
    },
    loadData(sourceOfPublicationId) {
      if (
        this.currentSourceOfPublicationId !== sourceOfPublicationId ||
        this.keyword !== this.tempKeyword
      ) {
        this.pageIndex = 0;
        this.branchData = [];
        this.partyaffairsofficeData = [];
        this.otherData = [];
        this.tempKeyword = this.keyword;
      }
      this.currentSourceOfPublicationId = sourceOfPublicationId;
      let partyGroupId;
      if (sourceOfPublicationId === "partyaffairsoffice") {
        this.tabIndex = 0;
      } else if (sourceOfPublicationId === "branch") {
        this.tabIndex = 1;
        partyGroupId = this.partyGroupId;
      } else {
        this.tabIndex = 2;
      }
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sourceOfPublicationId: sourceOfPublicationId,
        sortOrder: "DESC",
        sortField: "createTime",
        title: this.keyword,
        partyGroupId: partyGroupId,
      };
      loginService.getPartyAffairs(data).then((res) => {
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        this.pageIndex++;
        let searchReg = new RegExp(`${this.keyword}`, "g");
        let searchReplace = `<span class="text-red">${this.keyword}</span>`;
        res.data.forEach((v, i) => {
          // 标红字体
          if (this.keyword.length > 0) {
            v.title = v.title.replace(searchReg, searchReplace);
          }
          v.btns = [
            {
              action: "edit",
              text: "修改",
              color: "#f0ad4e",
            },
            {
              action: "delete",
              text: "删除",
              color: "#f00",
            },
          ];
        });
        if (sourceOfPublicationId === "partyaffairsoffice") {
          this.partyaffairsofficeData = this.partyaffairsofficeData.concat(
            res.data
          );
        } else if (sourceOfPublicationId === "branch") {
          this.branchData = this.branchData.concat(res.data);
        } else {
          this.otherData = this.otherData.concat(res.data);
        }
        setTimeout(() => {
          this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = !true;
        }, 100);
      });
    },
    search() {
      this.pageIndex = 0;
      this.branchData = [];
      this.partyaffairsofficeData = [];
      this.otherData = [];
      this.loadData(this.currentSourceOfPublicationId);
    },
    deleteItem(id) {
      let _this = this;
      this.$createDialog({
        type: "confirm",
        // icon: "cubeic-alert",
        title: "温馨提示",
        content: "确定删除记录吗？",
        confirmBtn: {
          text: "确定删除",
          active: true,
          disabled: false,
          href: "javascript:;",
        },
        cancelBtn: {
          text: "取消删除",
          active: false,
          disabled: false,
          href: "javascript:;",
        },
        onConfirm: () => {
          _this.delPartyAffairsById(_this, id);
        },
        onCancel: () => {},
      }).show();
    },
    delPartyAffairsById(_this, id) {
      loginService.delPartyAffairsById(id).then((res) => {
        tools.tip(res.message);
        if (_this.tabIndex === 0) {
          _this.pageIndex = 0;
          _this.partyaffairsofficeData = [];
        } else if (_this.tabIndex === 1) {
          _this.pageIndex = 0;
          _this.branchData = [];
        } else {
          _this.pageIndex = 0;
          _this.otherData = [];
        }
        _this.loadData(_this.currentSourceOfPublicationId);
      });
    },
    canEditOrDelete(data) {
      return (
        data.modifyAuthority === "true" || data.deletePermission === "true"
      );
    },
  },
};
</script>
<style scoped="" lang="scss">
.swiper-no-swiping {
  transform: translateX(0) !important;
}
</style>
